<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>我的订单</p>
        </header>

        <!-- 订单列表部分 -->
        <h3>未支付订单信息：</h3>
        <ul class="order">
            <li>
                <div class="order-info">
                    <p>
                        万家饺子（软件园E18店）
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;49</p>
                        <div class="order-info-right-icon" @click="handleClick(100)">去支付</div>
                    </div>
                </div>
                <ul class="order-detailet">
                    <li>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>&#165;15</p>
                    </li>
                    <li>
                        <p>玉米鲜肉（水饺） x 1</p>
                        <p>&#165;16</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;3</p>
                    </li>
                </ul>
            </li>
            <li>
                <div class="order-info">
                    <p>
                        小锅饭豆腐馆（全运店）
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;55</p>
                        <div class="order-info-right-icon" @click="handleClick(100)">去支付</div>
                    </div>
                </div>
                <ul class="order-detailet">
                    <li>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>&#165;15</p>
                    </li>
                    <li>
                        <p>玉米鲜肉（水饺） x 1</p>
                        <p>&#165;16</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;3</p>
                    </li>
                </ul>
            </li>
        </ul>

        <h3>已支付订单信息：</h3>
        <ul class="order">
            <li>
                <div class="order-info">
                    <p>
                        万家饺子（软件园E18店）
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;49</p>
                    </div>
                </div>
                <ul class="order-detailet">
                    <li>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>&#165;15</p>
                    </li>
                    <li>
                        <p>玉米鲜肉（水饺） x 1</p>
                        <p>&#165;16</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;3</p>
                    </li>
                </ul>
            </li>
            <li>
                <div class="order-info">
                    <p>
                        小锅饭豆腐馆（全运店）
                        <i class="fa fa-caret-down"></i>
                    </p>
                    <div class="order-info-right">
                        <p>&#165;55</p>
                    </div>
                </div>
                <ul class="order-detailet">
                    <li>
                        <p>纯肉鲜肉（水饺） x 2</p>
                        <p>&#165;15</p>
                    </li>
                    <li>
                        <p>玉米鲜肉（水饺） x 1</p>
                        <p>&#165;16</p>
                    </li>
                    <li>
                        <p>配送费</p>
                        <p>&#165;3</p>
                    </li>
                </ul>
            </li>
        </ul>

        <!-- 底部菜单部分 -->
        <div class="footer">
            <div @click="handleClick(1)"><i class="fa fa-home"></i><p>首页</p></div>
            <div><i class="fa fa-compass"></i><p>发现</p></div>
            <div @click="handleClick(2)"><i class="fa fa-file-text"></i><p>订单</p></div>
            <div @click="handleClick(3)"><i class="fa fa-user-o"></i><p>我的</p></div>
        </div>

    </div>
</template>

<script setup>
import router from "../router/index.js";
function handleClick(Num){
    //路由负责跳转
    if (Num===1)router.push('/Index')
    if(Num===2)router.push('/OrderList')
    if(Num===3)router.push('/Login')
    if(Num===100)router.push('/Order')

}

</script>

<style scoped lang="css">
@import "../../src/css/orderList.css";
@import "../../src/css/font-awesome/css/font-awesome.min.css";
@import "../../src/css/reset.css";
@import "../../src/css/global.css";
@import "../../src/css/businessList.css";
@import "../../src/css/normalize.css";
</style>